<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/jquery/dist/jquery.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            list-style: none;
            /* background-color: #000; */
            background: url(/image/1.webp) no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        .box {
            width: 1000px;
            height: 560px;
            margin: 70px auto;
            /* background-color: #eee; */
            background-color: rgba(49, 49, 49, 0.7);
            border-radius: 20px;
        }

        .top {
            width: 1000px;
            height: 75px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 20px 20px 0 0;
        }

        .top h3 {
            font-size: 24px;
            color: #eee;
            margin-left: 470px;
            line-height: 75px;
            display: inline;
        }


        .zuo {
            width: 298px;
            height: 485px;
            float: left;
            border-right: 2px solid #fff;
        }

        .zuo .zxry {
            width: 298px;
            height: 198px;
            /* background-color: #4CAF50; */
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            box-sizing: border-box;
            overflow-y: scroll;
        }

        .zuo .zxry p,
        .zuo .lsjl p {
            margin: 0;
            font-size: 16px;
            color: #fff;
            font-weight: 700;
            border-left: #fff 8px solid;
            padding-left: 6px;
        }

        .zuo .lsjl {
            width: 298px;
            height: 285px;
            /* background-color: aquamarine; */
            padding: 5px 10px;
            box-sizing: border-box;
            overflow-y: scroll;
        }

        .you {

            width: 700px;
            height: 485px;
            float: right;

        }

        .ltjm {
            width: 700px;
            height: 350px;
            padding: 10px 25px;
            box-sizing: border-box;
            overflow-y: scroll;
            background-color: rgba(167, 213, 229, 0);
        }

        .ltjm .lt-zuo img,
        .ltjm .lt-you img {
            width: 40px;
            height: 40px;
            border-radius: 5px;
        }

        .ltjm .lt-zuo h4,
        .ltjm .lt-you h4 {
            margin: 0;
            color: #fff;
        }

        .ltjm .lt-zuo span {
            display: inline-block;
            padding: 5px 10px;
            background-color: rgba(51, 116, 176, 0.8);
            border-radius: 0px 20px 20px 20px;
            color: #fff;
            font-weight: 500;
            margin-top: 5px;
        }

        .ltjm .lt-you span {
            display: inline-block;
            padding: 5px 10px;
            background-color: rgba(51, 116, 176, 0.8);
            border-radius: 20px 0px 20px 20px;
            color: #fff;
            font-weight: 500;
            margin-right: 50px;
            margin-top: -13px;
        }

        .ltjm .lt-you {
            float: right;
            width: 700px;
        }

        .fsxx {
            width: 700px;
            height: 133px;

            border-top: 2px solid #999;
            padding: 5px 10px;
            box-sizing: border-box;
        }

        textarea {
            width: 670px;
            border: 0;
            height: 75px;
            resize: none;
            outline: none;
            padding: 5px;
            box-sizing: border-box;
            background-color: rgba(49, 49, 49, 0);
            color: #fff;
        }

        .btn {
            background-color: rgba(51, 116, 176, 0.8);
            border: none;
            border-radius: 5px;
            color: white;
            padding: 8px 20px;
            text-align: center;
            display: inline-block;
            font-size: 16px;
            margin-right: 15px;
            margin-bottom: -10px;
            margin-left: 590px;
            font-weight: 700px;
            font-family: "黑体";
        }

        .xx {
            text-align: center;
            display: inline-block;
            background-color: rgba(203, 203, 203, 0.5);
            color: #eee;
            margin-left: 260px;
            font-size: 10px;
            padding: 3px 8px;
        }

        .tc {
            float: right;
            color: #fff;
            margin-top: 46px;
            margin-right: 10px;
            font-size: 16px;
        }

        .zxry ul li,
        .lsjl ul li {
            color: #fff;
            font-size: 16px;
            font-weight: 700px;
            font-family: "黑体";
            padding: 5px;
            background-color: rgba(51, 116, 176, 0.3);
            margin-bottom: 5px;
            list-style: none;
        }

        .zxry ul,
        .lsjl ul {
            padding: 0;
        }
    </style>
    <title>聊天室</title>
</head>

<body>
    <div class="box">
        <div class="top">
            <h3>聊 天 室</h3>
            <a style="text-decoration:none" href="/logout?name=<%=data[0].username%>" class="tc">退出聊天</a>
        </div>
        <div class="bottom">
            <div class="zuo">
                <!-- 在线人员 -->
                <div class="zxry">
                    <p>点击查看在线人员:</p>
                    <ul>

                    </ul>
                </div>
                <!-- 历史记录 -->
                <div class="lsjl">
                    <p>点击查看历史记录:</p>
                    <ul>
                        <!-- <li><span>用户名:</span>erdfgfddewrt</li> -->
                    </ul>
                </div>
            </div>
            <div class="you">
                <!-- 聊天界面 -->
                <div class="ltjm">
                    <!-- <div class="lt-zuo">
                        <img src="/image/1.JPG" style="margin-right: 10px;float: left;">
                        <h4>张三</h4>
                        <span>你好呀，我是张三</span>
                    </div>
                    <div class="lt-you">
                        <img src="/image/1.JPG" style="margin-left: 10px;float: right;">
                        <h4 style="float: right;">李四</h4>
                        <div style="clear: both;"></div>
                        <span style="float: right;">你好呀张三，我是李四</span>
                    </div> -->
                    <!-- <p class="xx">XXX以上线</p> -->
                </div>
                <!-- 发送信息界面 -->
                <div class="fsxx">
                    <textarea placeholder="请输入内容..."></textarea>
                    <button href="/fs" class="btn fs">发送</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let socket = io.connect("/")
    //获取姓名
    let name = "<%=data[0].username%>"
    console.log(name);

    //获取图片路径
    // ../uploads/ules\uploads\upload_9ca899450368c199c872180f9402ed60.jpg
    let i = "/uploads/<%=data[0].img.substr(21)%>"
    console.log(i);


    $(".fs").click(function () {
        if (name != "游客") {
            //获取内容
            let text = $("textarea").val().trim()
            if (text != "") {
                //发送到服务器
                socket.emit("2", { "name": name, "text": text, "img": i })
                //添加节点

                $(".ltjm").append(`<div class="lt-you">
                        <img src="${i}" style="margin-left: 10px;float: right;">
                        <h4 style="float: right;">${name}</h4>
                        <div style="clear: both;"></div>
                        <span style="float: right;">${text}</span>
                    </div>`)
            } else {
                alert("内容不能为空")
            }
            //清空文本框
            $("textarea").val("")
        } else {
            alert("请登录")
            // location.href = "./login.ejs"
        }
    })
    //回车发送
    $(window).keydown(function (e) {
        if (e.keyCode == 13) {
            $(".fs").trigger('click');
            return false;
        }
    })

    //接收客户端的消息信息，然后添加到页面上
    socket.on("1", function (res) {
        // console.log(res);
        //添加节点
        $(".ltjm").append(`<div class="lt-zuo">
                        <img src="${res.img}" style="margin-right: 10px;float: left;">
                        <h4>${res.name}</h4>
                        <span>${res.text}</span>
                    </div>`)
    })

    //欢迎进入聊天室
    socket.on("2", function (res) {
        console.log(res);
        $(".ltjm").append(`<p class="xx">${res}</p>`)
    })



    //历史记录
    let a = true;
    $(".lsjl p").click(function () {
        if (a == true) {
            //显示
            $.get("/lsjl", {}, function (res) {
                // console.log(typeof res);
                // console.log(res);
                //遍历数据
                for (let i = 0; i < res.ls.length; i++) {
                    $(".lsjl ul").append(`<li><span>${res.ls[i].name}:</span>${res.ls[i].text}</li>`)
                }
            })
            a = false
        } else {
            //清空
            $(".lsjl ul").html("");
            a = true
        }
    })


    //在线人数
    $(".zxry p").click(function () {
        if (a == true) {
            //显示
            $.get("/hqlog", {}, function (res) {
                // console.log(res);
                //遍历数据
                for (let i = 0; i < res.zx.length; i++) {
                    $(".zxry ul").append(`<li>${res.zx[i].username}</li>`)
                }
            })
            a = false
        } else {
            //清空
            $(".zxry ul").html("");
            a = true
        }
    })

</script>

</html>